<template>
  <div class="Year">
    <ScreenTitle v-model:title-value="titleValue"></ScreenTitle>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script lang="ts" setup name="Year">
import { ref, onMounted, inject } from 'vue'
let titleValue = ref('年度游客对比')
const charts = ref()

const initEchartsOneFn = () => {
  // echarts初始化
  const Echarts = inject('$echarts')

  let myChart = (Echarts as any).init(charts.value)
  // 或
  // let myChart = proxy.$echarts.init(container.value);
  const option = {
    title: {
      text: '散点图',
      left: '50%',
      textStyle: {
        color: 'white'
      }
    },
    xAxis: {
      type: 'category',

      data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
    },
    yAxis: {
      show: false,
      min: 0,
      max: 3400
    },
    grid: {
      left: 20,
      top: 20,
      right: 0,
      bottom: 20
    },
    series: [
      {
        symbolSize: 20,
        data: [
          33, 88, 21, 9, 88, 234, 113, 1231, 674, 3, 88, 33, 21, 888, 3332, 313, 123, 5, 657, 7
        ],
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: 'red' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'blue' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        symbol: 'diamond',
        symbolSize: 18,
        label: {
          show: true,
          //文字的位置
          position: [0, -12],
          //文字颜色
          color: '#red'
        },
        type: 'scatter'
      }
    ]
  }

  myChart.setOption(option)
}
onMounted(() => {
  initEchartsOneFn()
})
</script>

<style scoped>
.Year {
  margin: 10px;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  .charts {
    margin-top: 10px;
    width: 100%;
    height: 100%;
  }
}
</style>
